<script setup lang="ts">
import { reactive,ref } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
import { userStore } from '@/store/user/index.ts'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
const router = useRouter()
const userstore = userStore()
const login_form = ref()
let loading = ref(false)
let longdata = reactive({
    username: 'admin',
    password: '111111'
})

// 登录
async function login() {
    await login_form.value.validate() // 表单全部验证通过才提交
    console.log(111);
    
    loading.value = true
    userstore.userLogin(longdata).then(res => {
        loading.value = false
        router.push('/')
        ElNotification({
            title: '成功',
            message: '登录成功',
            type:'success'
        })
    }).catch(err => {
        loading.value = false
        ElNotification({
            title: '错误',
            message: err.message,
            type: 'error'
        })
    })

}
// 表单验证规则
const rusername = (rule: any, value: any, callback: any) => {
    // rule: 规则
    // value: 输入值
    // callback: 回调函数,如果符合规则,则调用callback()，否则调用callback(new Error('错误提示'))
   if (/^\d+$/.test(value)) {
       callback(new Error('用户名不能为纯数字'))
   } else if (value === '') {
       callback(new Error('请输入用户名'))
   } else {
       callback()
   }
}
const rpassword = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}
// 表单验证规则
const rules = {
    username: [
        { validator: rusername, trigger: 'change' }
    ],
    password: [
    { validator: rpassword, trigger: 'change' }
    ]
}
</script>

<template>
    <div class="login-container">
        <!-- :model="longdata": 表单数据
        :rules="rules": 表单验证规则
        ref="login_form": 表单实例 -->
        <el-form class="login_form" :model="longdata" :rules="rules" ref="login_form">
            <h1>Login</h1>
            <h2>欢迎您：陈丁香</h2>
            <!-- prop="username": 表单字段名 -->
            <el-form-item prop="username">
                <el-input v-model="longdata.username" placeholder="Please username" :prefix-icon="User"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" v-model="longdata.password" placeholder="Please password" :prefix-icon="Lock"
                    show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" class="login_btn" @click="login" :loading="loading">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
.login-container {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url('@/assets/images/background.jpg') no-repeat center center;
    background-size: cover;

    .login_form {
        width: 30%;
        position: absolute;
        top: 40vh;
        right: 10vw;
        background: url('@/assets/images/login_form.png') no-repeat center center;
        background-size: cover;
        padding: 20px;

        h1 {
            font-size: 4cqh;
            font-weight: 700;
            color: #fff;
            margin: 20px 0 0 20px;
        }

        h2 {
            font-size: 24px;
            color: #fff;
            margin: 20px 0;
        }

        .login_btn {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            color: #fff;
            background-color: #007aff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

    }
}
</style>